<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js</title>
    <style>
@media screen and (max-width: 3900px) {
  .x-container{
    width: 40%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 2800px) {
  .x-container{
    width: 50%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 2000px) {
  .x-container{
    width: 70%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 1200px) {
  .x-container{
    width: 80%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 600px) {
  .x-container{
    width: 95%;
    margin: 0 auto;
  }
}
/* @media screen and (max-width: 359px) {
  .x-container{
    width: 100%;
    margin: 0 auto;
  }
} */
    </style>
</head>
<body>
    <div class="x-container">
        <h3>（1）折线图</h3>
        <p style="text-indent: 2em;color: #666;">环形图又叫做甜甜圈图，其本质是饼图将中间区域挖空。</p>
        <div style="width: 500px;height: 275px; margin: 2px auto;">
          <canvas id="myChart"></canvas>
        </div>
        
        <h3>（2）柱状图</h3>
        <p style="text-indent: 2em;color: #666;">环形图又叫做甜甜圈图，其本质是饼图将中间区域挖空。</p>
        <div style="width: 500px;height: 275px; margin: 2px auto;">
          <canvas id="myChart2"></canvas>
        </div>

        <h3>（3）比例图</h3>
        <p style="text-indent: 2em;color: #666;">环形图又叫做甜甜圈图，其本质是饼图将中间区域挖空。
          环形图是由两个及两个以上大小不一的饼图叠在一起，挖去中间的部分所构成的图形。          
          饼图是用圆形及圆内扇形的角度来表示数值大小的图形，它主要用于表示一个样本（或总体）中各组成部分的数据占全部数据的比例，对于研究结构性问题十分有用。
        </p>
        <div style="width: 500px;height: 500px; margin: 2px auto;">
          <canvas id="myChart3"></canvas>
        </div>
        <h3>（4）混合图</h3>
        <p style="text-indent: 2em;color: #666;">
          环形图又叫做甜甜圈图，其本质是饼图将中间区域挖空。
          环形图是由两个及两个以上大小不一的饼图叠在一起，挖去中间的部分所构成的图形。
          饼图是用圆形及圆内扇形的角度来表示数值大小的图形，它主要用于表示一个样本（或总体）中各组成部分的数据占全部数据的比例，对于研究结构性问题十分有用。
        </p>
        <div style="width: 500px;height: 275px; margin: 2px auto;">
          <canvas id="myChart4"></canvas>
        </div>
    </div>
</body>
<script src="//mirror.fe80.cn/Chart.js/3.9.1/chart.min.js"></script>
<script>
const ctx = document.getElementById('myChart');
const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份'];  // 设置 X 轴上对应的标签
const data = {
  labels: labels,
  datasets: [{
    label: '语文',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
    tension: 0.1
  },{
    label: '数学',
    data: [55, 69, 70, 81, 46, 45, 30],
    fill: false,
    borderColor: 'rgb(175, 92, 192)', // 设置线的颜色
    tension: 0.1
  }]
};
const config = {
  type: 'line', // 设置图表类型
  data: data,
};
const myChart = new Chart(ctx, config);

const ctx2 = document.getElementById('myChart2');
const labels2 = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份'];  // 设置 X 轴上对应的标签
const data2 = {
  labels: labels2,
  datasets: [{
    label: '七年级',
    data: [65, 59, 80, 81, 56, 55, 40],
    backgroundColor: [      // 设置每个柱形图的背景颜色
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [     //设置每个柱形图边框线条颜色
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1     // 设置线条宽度
  },{
    label: '八年级',
    data: [5, -10, -12, -15, 6, -18, 3],
    backgroundColor: [      // 设置每个柱形图的背景颜色
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [     //设置每个柱形图边框线条颜色
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1     // 设置线条宽度
  }]
};
const config2 = {
  type: 'bar', // 设置图表类型
  data: data2,  // 设置数据集
  options: {
    scales: {
      y: {
        beginAtZero: true // 设置 y 轴从 0 开始
      }
    }
  },
};
const myChart2 = new Chart(ctx2, config2);


const ctx3 = document.getElementById('myChart3');
const data3 = {
  labels: [
    '七年级',
    '八年级',
    '九年级'
  ],
  datasets: [{
    label: '环形图实例',
    data: [60, 50, 30],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};
const config3 = {
  type: 'doughnut',
  data: data3,
  // options: {
  //   responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
  //   maintainAspectRatio: false,// 保持图表原有比例
  //   scales: {
  //     yAxes: [{
  //       ticks: {
  //         beginAtZero:true
  //       }
  //       }]
  //   }
  // }
  options: {
    responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
    maintainAspectRatio: false,// 保持图表原有比例
    scales: {
        // y: {
        //     beginAtZero: true
        // }
    }
  }
};
const myChart3 = new Chart(ctx3, config3);


const ctx4 = document.getElementById('myChart4');
const data4 = {
  labels: [
    '一月份',
    '二月份',
    '三月份',
    '四月份'
  ],
  datasets: [{
    type: 'bar',
    label: '柱形图数据集',
    data: [45, 49, 52, 48],
    borderColor: 'rgb(255, 99, 132)',
    backgroundColor: 'rgba(255, 99, 132, 0.2)'
  }, {
    type: 'line',
    label: '折线图数据集',
    data: [50, 30, 25, 49],
    fill: false,
    borderColor: 'rgb(54, 162, 235)'
  }]
};
const config4 = {
  type: 'scatter',
  data: data4,
  options: {
    responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
    maintainAspectRatio: false,// 保持图表原有比例
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};
const myChart4 = new Chart(ctx4, config4);
</script>
</html>